<template>
  <div class="user-detail-page">
    <main>
      <div class="header">
        <div class="search-container">
          <div class="search-input">
            <ul>
              <li :class="tabId === '1' ? 'active' : ''" @click="handleSwitch('1')">
                项目信息
              </li>
              <li :class="tabId === '2' ? 'active' : ''" @click="handleSwitch('2')">
                项目角色
              </li>
              <li :class="tabId === '3' ? 'active' : ''" @click="handleSwitch('3')">
                参建单位
              </li>
            </ul>
            <div v-show="tabId === '2'" class="input-container">
              <el-input placeholder="项目名称/项目简称" v-model="condition"></el-input>
              <el-button class="search-btn" type="primary" @click="handleSearch">
                <i class="el-icon-search"></i>
              </el-button>
              <el-button type="primary" @click="handleRefresh">
                <i class="el-icon-refresh"></i>
              </el-button>
            </div>
          </div>
          <div class="btns">
            <el-button v-if="hasTabEdit" v-show="tabId === '1'" type="primary" @click="editProject">
              编辑
            </el-button>
            <el-button v-if="hasTabAdd"  v-show="tabId === '2'" type="primary" @click="addRole">
              新建角色
            </el-button>
            <el-button v-if="hasTabAdd" v-show="tabId === '3'" type="primary" @click="addContractors">
              新建
            </el-button>
            <el-button v-if="hasTabSet" v-show="tabId === '3'" type="primary" @click="() => contractorsVisible = true">
              设置项目参建方
            </el-button>
            <el-button @click="$router.back()">返回</el-button>
          </div>
        </div>
      </div>
      <div class="table-container">
        <div v-show="tabId === '1'" class="content">
          <div class="img-container">
            <upload-picture-card
              :projectId="projectId"
              :publishId="publishId"
              :getFileFn="getTableData">
            </upload-picture-card>
          </div>
          <div class="project-info">
            <el-form
              :model="projectInfo"
              size="medium"
              ref="ruleForm"
              class="rule-form"
              :label-width="$setRem(130)">
              <div class="section">
                <p class="title">项目信息</p>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目名称" prop="projectName" required>
                      <span class="value">{{ projectInfo.projectName || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目简称" prop="projectAbbreviation" required>
                      <span class="value">{{ projectInfo.projectAbbreviation || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目经理" prop="manageName" required>
                      <span class="value">{{ projectInfo.manageName || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系方式" prop="managePhone" required>
                      <span class="value">{{ projectInfo.managePhone || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目状态" prop="projectStatus">
                      <span class="value">{{ projectInfo.projectStatus || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="施工许可证编号" prop="constructionPermitId">
                      <span class="value">{{ projectInfo.constructionPermitId || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属机构" prop="orgId" required>
                      <span class="value">{{ projectInfo.orgId || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="14">
                    <el-form-item class="location" label="项目定位" prop="point" required>
                      <span class="value">经度：{{ projectInfo.lng }}， 纬度：{{ projectInfo.lat }} </span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目地址" prop="projectAddress">
                      <span class="value">{{ projectInfo.projectAddress || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="项目简介" prop="projectDescription">
                      <span class="value">{{ projectInfo.projectDescription || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="section">
                <p class="title">工程信息</p>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="承包模式" prop="projectStatus">
                      <span class="value">{{ projectInfo.projectStatus || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程类别" prop="projectType" required>
                      <span class="value">{{ projectInfo.projectType || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="结构类型" prop="buildingStructure">
                      <span class="value">{{ projectInfo.buildingStructure || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="建筑面积" prop="area">
                      <span class="value">{{ projectInfo.area || '--' }}&nbsp;&nbsp;平方米</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程用途" prop="projectPurpose">
                      <span class="value">{{ projectInfo.projectPurpose || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程造价" prop="projectCost">
                      <span class="value">{{ projectInfo.projectCost || '--' }} 万元</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <div class="section">
                <p class="title">合同信息</p>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="合同签订日期" prop="signingDate">
                      <span class="value">{{ projectInfo.signingDate || '--' }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="竣工日期" prop="completionDate">
                      <span class="value">{{ projectInfo.completionDate || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开工日期" prop="commencementDate">
                      <span class="value">{{ projectInfo.commencementDate || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="合同工期" prop="contractDate">
                      <span class="value">{{ projectInfo.contractDate || '--' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </div>
        </div>
        <div v-show="tabId === '2'" class="content">
          <el-table
            v-loading="tableLoading"
            :data="roleList"
            row-key="id">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleCode" label="角色编码"></el-table-column>
            <el-table-column prop="角色" label="数量"></el-table-column>
            <el-table-column prop="roleIntro" label="备注" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="action" label="操作" width="300">
              <template slot-scope="scope">
                <el-button v-if="hasTableMember" type="primary" size="small" @click="setMember(scope.row)">
                  成员
                </el-button>
                <el-button
                  v-if="hasTablePermission"
                  type="primary"
                  size="small"
                  @click="$router.push(`/comprehensive/project-roles?roleId=${scope.row.id || ''}`)">
                  权限
                </el-button>
                <el-button v-if="hasTableEdit" type="primary" size="small" @click="editRole(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="hasTableDel" type="danger" size="small" @click="deleteRole(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </div>
        <div v-show="tabId === '3'" class="content">
          <el-table
            v-loading="tableLoading"
            :data="contractors"
            row-key="id">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column prop="attrName" label="项目参建方"></el-table-column>
            <el-table-column prop="orgName" label="机构名称"></el-table-column>
            <el-table-column prop="orgAbbr" label="机构简称"></el-table-column>
            <el-table-column prop="remark" label="备注" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="action" label="操作" width="180">
              <template slot-scope="scope">
                <el-button v-if="hasTableEdit" type="primary" size="small" @click="editContractors(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="hasTableDel" type="danger" size="small" @click="handleDelete(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </div>
      </div>
      <add-role
        :visible="visible"
        :type="type"
        :option="currentData"
        :loading="loading"
        @cancel="visible = false"
        @submit="handleSave">
      </add-role>
      <set-project
        :visible="projectVisible"
        :loading="projectLoading"
        :options="projectInfo"
        type="edit"
        @cancel="projectVisible = false"
        @submit="saveProject">
      </set-project>
      <set-role-member
        :visible="memberVisible"
        :roleId="roleId"
        :title="memberTitle"
        @cancel="memberVisible = false">
      </set-role-member>
      <add-contractors
        :visible="contractorsVisible"
        :loading="contractorsLoading"
        :projectId="projectId"
        @cancel="contractorsVisible = false">
      </add-contractors>
      <add-mulcontractors
        :visible="mulcontractorsVisible"
        :loading="mulcontractorsLoading"
        :projectId="projectId"
        :option="contractorsData"
        @cancel="mulcontractorsVisible = false"
        @submit="saveMulcontractors">
      </add-mulcontractors>
    </main>
  </div>
</template>

<script>
import addRole from '@/components/corp/addRole';
import setProject from '@/components/corp/setProject';
import setRoleMember from '@/components/corp/setRoleMember';
import addContractors from '@/components/corp/addContractors';
import addMulcontractors from '@/components/corp/addMulcontractors';
import uploadPictureCard from '@/components/project/comprehensive/uploadPictureCard';

export default {
  components: {
    addRole,
    setProject,
    addContractors,
    addMulcontractors,
    setRoleMember,
    uploadPictureCard,
  },
  data() {
    return {
      tabId: this.$store.state.tabId || '1',
      condition: '',
      hasSearch: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      roleList: [], // 角色
      contractors: [], // 参建单位
      tableLoading: false,
      // 设置角色
      loading: false,
      visible: false,
      type: '',
      currentData: {},
      // 角色成员
      memberVisible: false,
      roleId: '',
      memberTitle: '',
      // 关联机构
      orgVisible: false,
      orgLoading: false,
      currentOrgData: {},
      // 编辑机构
      eidtOrgVisible: false,
      eidtOrgLoading: false,
      // 项目设置
      projectVisible: false,
      projectLoading: false,
      projectInfo: {},
      // 设置参建方
      contractorsVisible: false,
      contractorsLoading: false,
      // 设置参建方机构
      mulcontractorsVisible: false,
      mulcontractorsLoading: false,
      contractorsType: 'add',
      contractorsData: {}
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    publishId() {
      return this.$store.state.userInfo.uuid;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    }
  },
  watch: {
    tabId: {
      immediate: true,
      handler(val) {
        val && this.getData();
      }
    }
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    this.$store.commit('updateTabId', '1');
  },
  methods: {
    // 获取项目工程图集
    async getTableData(projectType) {
      return await this.$Model.getCommonList({
        pageFlag: false,
        projectType,
        projectId: this.projectId,
      });
    },
    getData() {
      if (this.tabId === '1') {
        this.getByProjectId();
      } else if (this.tabId === '2') {
        this.getRoleList();
      } else {
        this.getMulcontractors();
      }
    },
    /**
     * 获取项目信息
     */
    async getByProjectId() {
      if (!this.projectId) return;
      const params = {
        projectId: this.projectId,
      };
      const { success, data: {
        data
      }} = await this.$Model.getByProjectId(params);
      if (success && data) {
        this.projectInfo = data;
      }
    },
    /**
     * 获取项目角色信息
     */
    async getRoleList() {
      if (!this.projectId) return;
      const params = {
        projectId: this.projectId,
        pageFlag: false
      };
      const { success, data: {
        data
      }} = await this.$Model.getRoleList(params);
      if (success && data) {
        this.roleList = data.list || [];
      }
    },
    /**
     * 根据项目参建单位
     */
    async getMulcontractors() {
      if (!this.projectId) return;
      const params = {
        pageFlag: false,
        projectId: this.projectId,
      };
      const { success, data: {
        data
      }} = await this.$Model.getMulcontractors(params);
      if (success && data) {
        this.contractors = data.list;
      }
    },
    /**
     * 切换
     */
    handleSwitch(type) {
      this.tabId = type;
      this.tableLoading = false;
    },
    /**
     * 刷新
     */
    handleSearch() {
      this.hasSearch = true;
      this.clear();
    },
    /**
     * 重置
     */
    handleRefresh() {
      this.hasSearch = false;
      this.clear();
    },
    /**
     * 编辑项目
     */
    editProject() {
      this.projectVisible = true;
    },
    /**
     * 新建角色
     */
    addRole() {
      this.type = 'add';
      this.currentData = {};
      this.visible = true;
    },
    /**
     * 编辑角色
     */
    editRole(row) {
      this.type = 'edit';
      this.currentData = { ...row };
      this.visible = true;
    },
    /**
     * 删除角色
     */
    deleteRole(row) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        this.tableLoading = true;
        const { success } = await this.$Model.delSystemRole({
          ids: row.id,
        });
        this.tableLoading = false;
        if (success) {
          this.getRoleList();
          this.$message.success('删除成功');
        }
      });
    },
    /**
     * 成员设置
     */
    setMember(row) {
      this.roleId = row.id;
      this.memberTitle = row.roleName;
      this.memberVisible = true;
    },
    addContractors() {
      this.contractorsType = 'add';
      this.contractorsData = {};
      this.mulcontractorsVisible = true;
      this.mulcontractorsLoading = false;
    },
    editContractors(row) {
      this.contractorsType = 'edit';
      this.contractorsData = { ...row };
      this.mulcontractorsVisible = true;
      this.mulcontractorsLoading = false;
    },
    /**
     * 删除
     * @param {Object} row 当前数据
     */
    handleDelete(row) {
      this.$confirm('此操作将删除该选项, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        this.tableLoading = true;
        const { success } = await this.$Model.delMulcontractors({
          ids: row.id,
        });
        this.tableLoading = false;
        if (success) {
          this.getMulcontractors();
          this.$message.success('删除成功');
        }
      });
    },
    /**
     * 保存角色设置
     * @param {Object} data 当前数据
     */
    async handleSave(data) {
      const params = {
        ...this.currentData,
        projectId: this.projectId,
        roleType: '2', // 1：系统角色；2：项目角色
        ...data,
      };
      this.loading = true;
      const { success } = this.type === 'add'
        ? await this.$Model.addSystemRole(params)
        : await this.$Model.updateSystemRole(params);
      this.loading = false;
      if (success) {
        this.$message.success('保存成功');
        this.getRoleList();
        this.visible = false;
      }
    },
    // 保存项目设置
    async saveProject(params) {
      this.projectLoading = true;
      const { success } = await this.$Model.projectSet(params);
      this.projectLoading = false;
      if (success) {
        this.getByProjectId();
        this.$message.success('保存成功');
        this.projectVisible = false;
      }
    },
    /**
     * 保存参建单位机构设置
     */
    async saveMulcontractors(data) {
      this.mulcontractorsLoading = true;
      const { success } = this.contractorsType === 'add'
        ? await this.$Model.addMulcontractors(data)
        : await this.$Model.updateMulcontractors(data);
      this.mulcontractorsLoading = false;
      if (success) {
        this.getMulcontractors();
        this.$message.success('保存成功');
        this.mulcontractorsVisible = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/table";
  @import "../../../assets/styles/dialog";

  .user-detail-page {
    width: 100%;
    height: 100%;
    padding: 20px 30px;
    background-color: $baseBg;
    main {
      width: 100%;
      height: 100%;
      padding: 20px;
      background-color: $mainBg;
      .header {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 20px;
        .title {
          font-size: 20px;
        }
        .search-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .search-input {
            display: flex;
            ul {
              width: 400px;
              display: flex;
              li {
                width: 200px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                background-color: #fff;
                color: rgba(0, 0, 0, .8);
                cursor: pointer;
                transition: all .2s;
                &.active, &:hover {
                  background: $linearG;
                  color: #fff;
                }
                &:nth-child(1) {
                  border-radius: 5px 0 0 5px;
                }
                &:nth-last-child(1) {
                  border-radius: 0 5px 5px 0;
                }
              }
            }
            .input-container {
              width: 400px;
              display: flex;
              margin-left: 20px;
            }
            .el-input {
              margin-right: 20px;
            }
          }
          .btns {
            display: flex;
          }
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 50px);
        .content {
          width: 100%;
          height: 100%;
          .img-container {
            width: calc(50% - 10px);
            height: 100%;
            float: left;
            overflow: auto;
            &::after {
              content: '';
              display: block;
              clear: both;
            }
          }
          .project-info {
            width: calc(50% - 10px);
            height: 100%;
            float: right;
            overflow-y: auto;
            &::after {
              content: '';
              display: block;
              clear: both;
            }
            /deep/ .el-form {
              width: calc(100% - 5px);
              .section {
                padding: 20px;
                border: 1px solid #fff;
                margin-bottom: 20px;
                border-radius: 5px;
                > .el-row {
                  .el-form-item__label {
                    color: #fff;
                  }
                  .el-form-item__content {
                    color: $mainColor;
                    .value {
                      display: inline-block;
                      white-space: pre-wrap;
                      word-break: break-all;
                    }
                  }
                }
              }
            }
          }
        }
        /deep/ .el-table {
          height: calc(100% - 50px);
          .el-table__body-wrapper {
            height: calc(100% - 40px);
            overflow-y: auto;
            .btn {
              color: $mainColor;
              cursor: pointer;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }
</style>
